<template>
  <div class="answer-container">
    <div class="answer-container__main">
      <div class="answer-container__left">
        <nav-wrap
          width="112px"
          :list="list"
        ></nav-wrap>
      </div>
      <div class="answer-container__center">
        <card-container
          width="816px"
          :title="labelTitle"
        >
          <answer-card card-type="2" v-for="(val,index) in QuestionList" :info="val" :key="val.questionId"></answer-card>
          <empty-card v-if="QuestionList.length===0" height="556px"></empty-card>
        </card-container>
        <div class="pagination">
          <pagination style="margin: 0 auto;" :pages="pages" ref="pagination"  v-on:listenPageChange="changePage"></pagination>
        </div>
      </div>
      <div class="answer-container__right">
        <div class="right__write-answer" @click="toRelease">我要提问</div>
        <div class="right__search-answer" v-if="false">
          <input type="text">
          <div @click="search"><yun-icon name="search" size="16px" color="#fff"></yun-icon></div>
        </div>
        <div class="right__my-answer" v-if="false">
          <div class="my-answer__wrap">
            <div class="my-answer__l">
              <yun-icon name="star" color="#F8A06F" size="20px" style="margin-top: -5px"></yun-icon>
              <p>我收藏的问题</p>
            </div>
            <p class="my-answer__r">12</p>
          </div>
          <div class="my-answer__wrap">
            <div class="my-answer__l">
              <yun-icon name="star" color="#F8A06F" size="20px" style="margin-top: -5px"></yun-icon>
              <p>我收藏的问题</p>
            </div>
            <p class="my-answer__r">12</p>
          </div>
          <div class="my-answer__wrap">
            <div class="my-answer__l">
              <yun-icon name="star" color="#F8A06F" size="20px" style="margin-top: -5px"></yun-icon>
              <p>我收藏的问题</p>
            </div>
            <p class="my-answer__r">12</p>
          </div>
        </div>
        <card-container
          title="热门答主"
          width="302px"
          style="margin-top: 16px;padding-bottom: 10px"
        >
          <user-card    style="padding-bottom: 2px;padding-top: 2px" v-for="(val,index) in repliersList" :key="val.userId"  :info="val"></user-card>
        </card-container>
      </div>
    </div>
  </div>
</template>

<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";
import ProjectCard from "../../components/pc/projectCard";
import Pagination from "../../components/pc/pagination";
import AnswerCard from "../../components/pc/answerCard";
import config from "../../action/config";
import EmptyCard from '../../components/pc/emptyCard';
import UserCard from '../../components/pc/userCard2';
export default {

  async asyncData({$axios,query}){

    let typeList = await $axios.$get(config.api.get.QuestionCategory.list);
    let  params={
      page:1,
      size:12
    };

    if(query && query.type!=='all' ){
      params.categoryId = query.type
    }
    let   articleList = await  $axios.$get(config.api.get.Question.list,{params:params});
    return {articleList:articleList.data.dataList, articlePages:articleList.data.totalPage,typeList:typeList.data}

  },

  components: {AnswerCard, Pagination, ProjectCard, CardContainer, NavWrap,UserCard,EmptyCard},
  data(){
    return{
      list: [
        {
          label: '全部问答',
          address: '/answer',
          type: 'all'
        },
      ],
      pages:1,
      QuestionList:[],
      labelTitle:'',
      repliersList:[],
      firstLoad:true
    }
  },
  created() {
    this.dataGetQuestionCategory();
    this.getLabelTitle();

    this.dataGetHotRepliersList();
    this.handleArticleList();
  },
  watch:{
    $route(){
      this.restartPagination();
      this.getLabelTitle()
    }
  },

  methods: {
    handleArticleList(){
      this.QuestionList = this.articleList;
      this.pages = this.articlePages;
    },

    toRelease(){
      this.$router.push('/answer/release');
    },
    search(){
      this.$router.push('/search/answer');
    },
    restartPagination(){
      if(process.browser){
        this.QuestionList = [];
        this.$refs.pagination.setCurrentPage(1)
      }
    },
    getLabelTitle(){
      let type = this.$route.query.type;
      this.list.map((val,index)=>{
        if(val.type===type){
          this.labelTitle =  val.label
        }
      })
    },

    dataGetHotRepliersList() {
      let params={
        page: 1,
        size: 12
      };
      this.$axios.$get(config.api.get.User.repliers,{params:params})
        .then((response)=>{
          this.repliersList = response.data.dataList;
        });
    },
    dataGetQuestionCategory(){
      this.typeList.map((val,index)=>{
        this.list.push({
          label: val.category,
          address: '/answer',
          type: val.categoryId.toString()
        })
      })
    },
    dataGetQuestionList(currentPage){
      let  params={
        page:currentPage,
        size:12
      };
      if(this.$route.query.type&&this.$route.query.type!=='all' ){
        params.categoryId = this.$route.query.type
      }
      this.$axios.$get(config.api.get.Question.list,{params:params}).then((response)=>{
        this.QuestionList=response.data.dataList;
        this.pages = response.data.totalPage;
      })
    },

    changePage(currentPage){
      //返回页数 请求新的数据
      if(this.firstLoad){
        this.firstLoad = false
      }else{
        this.dataGetQuestionList(currentPage)
      }
    }

  }

}
</script>

<style lang="scss" scoped>
  .answer-container{
    > .answer-container__main{
      width: $pageWidth;
      margin: 0 auto;
      padding-top: 16*$length;
      padding-bottom: 32*$length;
      @extend %flex-row-spb;
      align-items: start;
      .answer-container__left{}
      .answer-container__center{
        .pagination{
          margin: 32*$length;
        }
      }
      .answer-container__right{
        .right__write-answer{
          width: 302*$length;
          background-color: #fff;
          @include fontStyle(14,56,500,#00AAE6,center);
          @include border-radius(4*$length);
          @extend %animate-transition;
          @extend %cursorPointer;
          &:hover {
            color: #fff;
            background-color: #00AAE6;
          }
        }
        .right__search-answer{
          width: 302*$length;
          overflow: hidden;
          margin-top: 16*$length;
          @include border-radius(4*$length);
          @extend %flex-row-spb;
          > input {
            @include fontStyle(12,16,500,#999,left);
            width: 236*$length;
            height: 56*$length;
            padding: 20*$length 16*$length;
          }
          > div {
            width: 66*$length;
            height: 56*$length;
            line-height: 50*$length;
            text-align: center;
            background-color: #00AAE6;
          }
        }
        .right__my-answer{
          height: 138*$length;
          width: 302*$length;
          overflow: hidden;
          margin-top: 16*$length;
          padding: 20*$length 16*$length;
          box-sizing: border-box;
          background-color: #fff;
          @include border-radius(4*$length);
          .my-answer__wrap{
            @extend %flex-row-spb;
            margin-bottom: 18*$length;
            .my-answer__l{
              @extend %flex-row-spb;
              height: 20*$length;
              line-height: 20*$length;
              > p {
                padding-left: 8*$length;
                @include fontStyle(14,20,500,#666,left);
              }
            }
            .my-answer__r{
              @include fontStyle(14,16,500,#666,left);
            }
          }
        }
      }
    }
  }
</style>
